<template>
  <view class="boxContent" :style="'height:' + imageContent.boxHeight + 'px'">
    <image @tap="clickImg" :data-item="imageContent" :src="imageContent.img"
      :style="'width:' + imageContent.width + ';height:' + imageContent.height + ';margin-left:' + imageContent.newLeft + 'px;margin-top:' + imageContent.top + 'px'">
    </image>
  </view>
</template>

<script lang=ts>
  import {
    Component,
    Vue,
    Prop
  } from 'vue-property-decorator'
  import {
    navtofun
  } from "@/utils/navtofun";

  @Component({})
  export default class ImageCom extends Vue {
    @Prop({
      type: Object
    })
    decoretionProperties: any

    imageContent: any = {}

    // 组件周期函数--监听组件挂载完毕
    mounted() {
      this.getImageCom();
    }

    getImageCom() {
      uni.getSystemInfo({
        success: res => {
          try {
            let pWidth = 0;
            pWidth = res.windowWidth;
            const decoretionProperties = this.decoretionProperties;
            const width = decoretionProperties.width
            const imgWidth = Number(width.match(/(\S*)px/)[1]);
            const newLeft =
              (decoretionProperties.left * (pWidth - imgWidth)) /
              (371 - imgWidth);
            decoretionProperties.newLeft = newLeft.toFixed(0);
            if (decoretionProperties.width === "371px") {
              decoretionProperties.width = "100%";
            }
            this.imageContent = decoretionProperties
          } catch (err) {
            console.log(err);
          }
        },
      });
    }

    clickImg(e) {
      const item = e.currentTarget.dataset.item;
      const itemLink = item.link;
      navtofun(itemLink, this);
    }
  }
</script>

<style lang="scss" scoped>
  .boxContent {
    // width: 100%;
    background-color: white;
  }
</style>